<DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>index</title>
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="javascript/vue-element-ui/index.css">
  <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
  <script src="javascript/vue-element-ui/vue.min.js"></script>
  <script src="javascript/vue-element-ui/index.js"></script>
  <script src="javascript/vue-element-ui/axios.min.js"></script>

</head>
<body>
	<div class="app" id="app">
		<div class="title">{{title}}</div>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
				 	<el-form-item label="站点号码">
				  		<el-input v-model="formInline.userid" placeholder="站点号码"></el-input>
					</el-form-item>
				  	<el-form-item label="站点名称">
				   		<el-input v-model="formInline.username" placeholder="站点名称"></el-input>
				  	</el-form-item>
				  	<el-form-item>
				    	<el-button type="primary" @click="onSubmit">查询</el-button>
				 	</el-form-item>
				 	<div class="card_progress">
				 		<span>下载进度：</span>
						<el-progress :percentage="percentage" :text-inside="true" :stroke-width="25" :format="format"></el-progress>
					</div>
				</el-form>
			</div>
			<div class="card_left">
				<div class="card_left_content" id="card_left_content">
					<div  v-for="(item,index) in project_list" :key="index" @click="getList(item.goods_id)" class="text item">
						<div v-if="index%2==0" class="text_hong">
							{{item.add_time | formatDate}}
				       		{{item.goods_name}}
						</div>
				        <div v-else class="text_lv">
							{{item.add_time | formatDate}}
				       		{{item.goods_name}}
						</div>
				    </div>
				</div>
				<div class="card_left_cmd">
					<textarea v-model="textarea_content"></textarea>
					<el-button class="card_button" type="primary" @click="gettextarea">提交</el-button>
				</div>
			</div>
		</el-card>
	</div>
</body>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data:{
			title:'空气质量服务数据详情',
			percentage:50,
			query:{
				query:'',
				pagenum:1,
				pagesize:50
			},
			formInline:[{
				userid:'',
				username:'',
			}],
			project_list:[],
			textarea_content:''
		},
		filters: {
			//过滤器转换时间戳
		  	formatDate:function(originVal) {
				const dt = new Date(originVal)
				const y = dt.getFullYear()
				//月份不足两位用0补齐
				const m = (dt.getMonth() + 1 +'').padStart(2,'0')
				const d = (dt.getDay() + '').padStart(2,'0')
				const hh = (dt.getHours() + '').padStart(2,'0')
				const mm = (dt.getMinutes() + '').padStart(2,'0')
				const ss = (dt.getSeconds()+ '').padStart(2,'0')

				return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
			}
		},
		updated:function(){
			//每次数据更新自动改变滚动条
		   this.scrollToBottom();
		},
		created(){
			this.project()
		},
		mounted () {

		},
		methods:{
			//user信息
			onSubmit:function(){
				this.query.pagesize = parseInt(this.query.pagesize) + 1
				this.project()
			},
			//获取数据
			project:function(){
				axios({
					method: 'get',
				    url: 'http://127.0.0.1:8888/api/private/v1/goods',
				    headers: {
			            'Authorization': window.sessionStorage.getItem('token'),
			        },
				    params: this.query,
				})
				.then(res=>{
					if(res.data.meta.status = 200)
					this.project_list = res.data.data.goods
					this.$message.success(res.data.meta.msg)
					console.log(res)
				})
				.catch(error=>{
					console.log(error)
				})
			},

			//每次刷新滚动条自动在底部
			scrollToBottom() {
				this.$nextTick(() => {
					var container = document.getElementById('card_left_content');
					container.scrollTop = container.scrollHeight;
				})
			},


			format(percentage) {
				return percentage === 100 ? '满' : `${percentage}%`;
			},

			//提交textarea数据
			gettextarea:function(){
				this.$message.success(this.textarea_content)
				axios({
					method: 'pot',
				    url: '',
				    headers: {
			            'Authorization': window.sessionStorage.getItem('token'),
			        },
				    params: this.query,
				})
				.then(res=>{
					
				})
				.catch(error=>{
					
				})
			}
		}
	})
</script>
<style type="text/css">
#app{
	width: calc(100% - 20px);
	margin:0px 10px 10px 10px;
	height: calc(100% - 10px);
	box-sizing: border-box;
	float: left;
}
.title{
	width: 100%;
	line-height: 60px;
	font-size: 25px;
	color: #434343;
	text-align: center;
	height: 60px;
	margin-bottom: 20px;
}
.el-form{
	margin-bottom: 0;
}
.el-form-item{
	margin-bottom: 0;
}
.card_progress{
	width: 30%;
	float: right;
	height: 24px;
	margin:8px 0;
}
.el-progress{
	width: calc(100% - 80px);
	float: left;
}
.card_progress span{
	line-height: 24px;
	float: left;
	width: 80px;
	text-align: center;
}
.item{
	height: auto;
	line-height: 50px;
	/*overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;*/
}
.el-card__body{
	width: calc(100% - 40px);
	height: calc(100% - 200px);
	overflow: hidden;
	display: inline-block;
}
.card_left{
	width: 100%;
	height: 100%;
	float: left;
}
.card_left_content{
	width: 100%;
	padding: 0 20px;
	height: calc(100% - 200px);
	border:1px solid #d1d1d1;
	overflow-y: auto;
	box-sizing: border-box;
	background: #000;
}
.text_hong{
	color: #f00;
}
.text_lv{
	color: #34f820;
}
.card_left_cmd{
	width: 100%;
	height: 200px;
	border:1px solid #d1d1d1;
	border-top: 0;
	box-sizing: border-box;
	padding:10px;
	background: #000;
}
.card_left_cmd textarea{
	width: 100%;
	height: 100%;
	border:0;
	outline: 0;
	font-size: 16px;
	background: #000;
	color: #ccc;
}
.card_button{
	position: absolute;
	bottom: 50px;
	right: 50px;
}
</style>
</html>	